<template>
    <div >
<div v-for="(item,index) in complete" :key="index" class="conts"  v-show="complete.length"  >
    <div class="commodity">
        <span>{{item.cusName}}</span>
        <a href="#">&gt;</a>
    </div>
          <van-card
               :desc="`下单时间：`+item.orderTime"
               :title="item.cusName"
               thumb="https://img01.yzcdn.cn/vant/ipad.jpeg">
                  <template #tags class="commoditys">
                    <van-tag plain type="danger">下单人：</van-tag>
                    <van-tag plain type="danger">{{item.orderUserName}}</van-tag>
                  </template>
                  <template #footer>
                    <!-- <van-button size="mini">发货</van-button> -->
                   <div class="bottom">
                   <span
                    :class="item.status == 0? 'span1' : item.status == 10 ? 'span2'  : item.status == 20  ? 'span' : 'span3'" @click="appraiseClick(item)">
                  {{item.status == 0 ? "发货": item.status == 10? "收货": item.status == 20 ? "评价": "查看评价"
                }}</span
              >
            </div>
                  </template>
                </van-card>
   </div>
   <van-empty description="描述文字" v-show="!complete.length" />

    </div>
</template>

<script>
import {GetGoodsList} from '@/raxios/api'
export default {
    data () {
        return {
            value:'',
            complete:[],
            
 
        }
    },
    props:['title'],
    
    created(){
        let val=this.title
        console.log(val);
    GetGoodsList({current:'1',size:'10',keyword:''}).then(res=>{
        this.complete=res.data.records
        // console.log(complete);
        // console.log(res.data.records);
    })
 },
 methods:{
      appraiseClick(item) {
      if (item.status == 20) {
        // this.$router.push("/AppraiseClick?serialNo=" + serialNo);
        this.$router.push({
          path: "/AppraiseClick",
          query: { serialNo: item.serialNo },
        });
      } else {
        this.$router.push({
          path: "/YiComment",
          query: { serialNo: item.serialNo },
        });
      }
    },
 }
}
</script>
 
<style lang = "less" scoped>
   .commodity{
        height: 0.3rem;
        border-bottom: 1px solid #ccc;
        line-height: 0.3rem;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        padding: .2rem;
        font-size: 0.14rem;}
.conts{
    margin-bottom: 0.1rem;
}
    .van-card__header{
        border-bottom: 1px solid #ccc;
    }
    /deep/.van-tag--plain::before{
        border: none;
    }
    .van-tag{
    color: #646566;
    }
  /deep/.van-card{
      background-color: #fff;
  }
      .bottom {
      height: 0.5rem;
      background-color: #fff;
      span {
        float: right;
        width: 0.7rem;
        height: 0.3rem;
        line-height: 0.3rem;
        text-align: center;
        background-color: #ffcc33;
        border-radius: 0.3rem;
        color: #fff;
        margin: 0.1rem 0.1rem;
      }
      .span1 {
        float: right;
        width: 0.7rem;
        height: 0.3rem;
        line-height: 0.3rem;
        text-align: center;
        background-color: #003399;
        border-radius: 0.3rem;
        color: #fff;
        margin: 0.1rem 0.1rem;
      }
      .span2 {
        float: right;
        width: 0.7rem;
        height: 0.3rem;
        line-height: 0.3rem;
        text-align: center;
        background-color: #fff;
        border: 1px solid #003399;
        border-radius: 0.3rem;
        color: #003399;
        margin: 0.1rem 0.1rem;
      }
      .span3 {
        float: right;
        width: 0.7rem;
        height: 0.3rem;
        line-height: 0.3rem;
        text-align: center;
        background-color: #fff;
        border: 1px solid #ffcc33;
        border-radius: 0.3rem;
        color: #ffcc33;
        margin: 0.1rem 0.1rem;
      }
    }
</style>